<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用layui</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>

<!-- 你的HTML代码 -->

<script src="./layui/layui.js"></script>
<script>
//一般直接写在一个js文件中

// 全局配置
layui.config({
  debug: false, //用于开启调试模式，默认false，如果设为true，则JS模块的节点会保留在页面
  base: './extends/' //设定扩展的Layui模块的所在目录，一般用于外部模块扩展
});

// 定义模块，见extends目录下

// 使用模块
//layui.use(['demo'], function(){
//  //do something
//  layui.demo();
//});


// 动态加载CSS
//layui.link('./css/demo.css')

// 本地存储
// layui.data(table, settings)
// layui.sessionData(table, settings)
layui.data('test', {  //【增】：向test表插入一个nickname字段，如果该表不存在，则自动建立。
  key: 'nickname'
  ,value: '贤心'
});
var localTest = layui.data('test');
console.log(localTest.nickname); 
layui.data('test', {  //【删】：删除test表的nickname字段
  key: 'nickname'
  ,remove: true
});
var localTest = layui.data('test');
console.log(localTest.nickname); //获得“贤心”
//【改】：同【增】，会覆盖已经存储的数据
layui.data('test', null); //删除test表

// 获取设备信息
var device = layui.device();

// 获取缓存信息
var conf = layui.cache;

// 拓展一个模块别名
if (false) { //注：此处与全局配置冲突, 不建议使用
    // (test为extends目录下的一个模块)
    layui.extend({myextend: './extends/test'});

    // 使用拓展模块
    layui.use(['myextend'], function(){
      //do something
      layui.myextend();
    });
}

layui.use(['layer', 'form'], function(){
  var layer = layui.layer;
  var form = layui.form;
  layer.msg('Hello World');
});

layui.use(['jquery', 'layer', 'ajaxhook', 'mock'], function(){
    var $ = layui.$; //重点处
    var ajaxhook = layui.ajaxhook.hook;
    var ajaxunhook = layui.ajaxhook.unhook;

    $(function(){
        ajaxhook({
            onreadystatechange:function(xhr){
                console.log("onreadystatechange called: %O",xhr)
            },
            onload:function(xhr){
                console.log("onload called: %O",xhr)
            },
            //hook function
            open:function(arg){
                console.log("open called: method:%s,url:%s,async:%s",arg[0],arg[1],arg[2]);
            }
        });

        ajaxunhook();

        layui.mock('data.json', 'get', {
            'name'     : '@name',
            'age|1-100': 100,
            'color'    : '@color'
        });

        $.ajax({
            //请求方式
            type:"GET",
            //文件位置
            url:"data.json",
            //返回数据格式为json,也可以是其他格式如
            dataType: "json",
            //请求成功后要执行的函数，拼接html
            success: function(data){
                console.log(data);
                console.log("success");
            }
        });
    });
});

</script>
</body>
</html>
